<template>
    <div style="margin: 10px">
      <div style="display: flex;flex-flow: column">
      <el-card style="width: 100%;margin-bottom:10px;height: 350px">
        <h2 slot="header">诊断报告详情</h2>
<!--        <h2 slot="header">数据总览</h2>-->
        <div style="display: flex;width: 100%">
          <div style="width: 200px; padding: 20px; margin-left: 50px;white-space: nowrap">
            <h3>诊断报告数</h3>
            <h1 style="color: #5470c6;font-size: 100px">{{diagnosticNum}}</h1>
          </div>
          <div style="width: 200px; padding: 20px; margin-left: 50px;white-space: nowrap">
            <h3>预测报告数</h3>
            <h1 style="color: #fac858;font-size: 100px">{{forecastNum}}</h1>
          </div>
          <div style="width: 200px; padding: 20px; margin-left: 50px;white-space: nowrap">
            <h3 style="white-space: nowrap">诊断模型报告数</h3>
            <h1 style="color: #b7eb8f;font-size: 100px">{{diagnosticModelNum}}</h1>
          </div>
          <div id="annual" style="width: 800px;margin-left: 100px;height: 250px"></div>
        </div>
        </el-card>
        <el-card style="height: 430px">
        <div style="display: flex; justify-content:  flex-end; padding: 10px">
            <div>
              <el-autocomplete
                placeholder="请输入关键字进行搜索"
                :trigger-on-focus="false"
                :fetch-suggestions="querySearch"
                size="medium"
                v-model="studentKeyword"
                clearable
              >
                <el-button slot="append" icon="el-icon-search" @click="choosePerson"></el-button>
              </el-autocomplete>
            </div>
        </div>
        <el-table
          @expand-change="shutData"
          :data="tableData"
          height="500"
          border
          style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="报告内容">
                  <el-input v-model="props.row.content" type="textarea"></el-input>
                  <el-button size="mini" type="danger">
                    取消
                  </el-button>
                  <el-button size="mini" type="primary">
                    保存
                  </el-button>
                </el-form-item>
              </el-form>
<!--              <div style="float: right;margin-top: 10px;">-->
<!--                <el-button type="primary">保存</el-button>-->
<!--              </div>-->
            </template>
          </el-table-column>
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            label="报告名"
            prop="name">
          </el-table-column>
          <el-table-column
            align="center"
            prop="type">
            <template  slot="header" slot-scope="scope">
              <el-select v-model="positionSelect" placeholder="报告类型" size="mini">
                <el-option v-for="item in positionSelectData" :key="item" size="mini"
                           :label="item.name" :value="item.value"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
          > <template slot-scope="scope">
            <el-button
              size="mini" type="primary">下载</el-button>
            <el-button
              size="mini"
              type="danger"
             >删除</el-button>
          </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="20"
            style="display: inline-block"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
          </el-pagination>
        </div>
      </el-card>
      </div>
    </div>
</template>

<script>
    export default {
        name: "ReportCard",
      data(){
          return{
            diagnosticNum:100,
            forecastNum:200,
            diagnosticModelNum:10,
            tableData: [{
              name: '轴承发热',
              type:'诊断报告',
              content:'轴承发热或响声不正常。润滑脂过多或不足， 轴承磨损烧坏， 润滑脂变质或\n' +
                '含有异物，轴承内外圈松动',
            }, {
              name: '轴承漏油',
              type:'诊断报告',
              content:'轴承漏油， 发生原因和润潜脂稀化轴承发热， 密封件间随过大或损坏， 润滑\n' +
                '脂多等相关',
            }, {
              name: '通用轴承',
              type:'诊断报告',
              content:'发电机失磁。该故障发生后，会降低系统电压和定子电压，升高定子电流',
            }, {
              name: '通讯故障',
              type:'诊断报告',
              content:'发电机着火。发电机周国有焦味， 端部空冷室有火光， 發电机差动、 接地等\n' +
                '保护可能动作，定子铁芯温度升高，表针摆动。',
            }],
            positionSelect:'',
            positionSelectData:[{name:'诊断报告',value:1}]
          }
      },
      mounted () {
          this.drawAnnualPie()
      },
      methods:{
        shutData(row,expanded){
            if(expanded.length===0){
              this.$message.info('保存成功')
              // alert(1)
            }
          },
        drawAnnualPie(){
          let option= {
            legend: {
              data: ['诊断报告数','预测报告数','预测模型报告数']
            },
            xAxis: {
              type: 'category',
              data: ['18:53', '18:54', '18:55', '18:56', '18:57', '18:58', '18:59'],
              name: "时", //坐标名字
              nameLocation: "end",//坐标位置，支持start,end，middle
              nameTextStyle: {//字体样
                padding: -10 //距离坐标位置的距离
              }
            },
            yAxis: {
              type: 'value',
              name: "指标数", //坐标名字
              nameLocation: "end",//坐标位置，支持start,end，middle
              nameTextStyle: {//字体样式


                padding: -10 //距离坐标位置的距离

              }
            },
            series: [{
              name: '诊断报告数',
              type: 'line',
              stack: '总量',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
              {
                name: '预测报告数',
                type: 'line',
                stack: '总量',
                data: [220, 182, 191, 234, 290, 330, 310]
              },
              {
                name: '预测模型报告数',
                type: 'line',
                stack: '总量',
                data: [150, 232, 201, 154, 190, 330, 410]
              },]
          };
          let myChart = this.$echarts.init(document.getElementById('annual'));
          myChart.setOption(option);
        },
      }
    }
</script>

<style scoped>

</style>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
